<template>
  <div class="table-page-search-wrapper" style="margin-top: 20px;">
    <a-form layout="inline" @keyup.enter.native="search">
      <a-row :gutter="10">
        <a-col :xxl="6" :xl="6" :lg="6" :sm="24">
          <a-form-item label="款号">
            <a-input
              v-model="queryParam.productNo"
              placeholder="请输入"
              allowClear
            />
          </a-form-item>
        </a-col>
        <template v-if="isMaterialList">
        <a-col :xxl="6" :xl="6" :lg="6" :sm="24">
          <a-form-item label="品牌">
            <a-select v-model="queryParam.brandId" placeholder="请选择" show-search :filter-option="filterOption">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="brand.weid+''" v-for="brand in brandList" :key="brand.weid">
                {{ brand.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="6" :lg="6" :sm="24">
          <a-form-item label="年份">
            <a-date-picker
              mode="year"
              style="width:100%;"
              placeholder="请选择年份"
              format='YYYY'
              v-model="queryParam.year"
              :open='yearShowOne'
              @change="handChange"
              @openChange="openChangeOne"
              @panelChange="panelChangeOne"/>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="6" :lg="6" :sm="24">
          <a-form-item label="季节">
            <a-select v-model="queryParam.season" placeholder="请选择" show-search :filter-option="filterOption">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1201">春</a-select-option>
              <a-select-option value="1202">夏</a-select-option>
              <a-select-option value="1203">秋</a-select-option>
              <a-select-option value="1204">冬</a-select-option>
              <!-- 春 1201 夏1202 秋1203 冬1204 -->
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="6" :lg="6" :sm="24">
          <a-form-item label="波段(月)">
            <a-select v-model="queryParam.productBandMonth" placeholder="请选择" show-search :filter-option="filterOption">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="month+''" v-for="month in months" :key="month">{{ month }}月</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="6" :lg="6" :sm="24">
          <a-form-item label="波段">
            <a-select v-model="queryParam.productBand" placeholder="请选择" show-search :filter-option="filterOption">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="A">A</a-select-option>
              <a-select-option value="B">B</a-select-option>
              <a-select-option value="C">C</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="6" :lg="6" :sm="24">
          <a-form-item label="搭配风格">
            <a-select v-model="queryParam.labelId" placeholder="请选择" show-search :filter-option="filterOption">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="item.code" v-for="item in styleOptions" :key="item.code">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </template>
        <a-col :xxl="6" :xl="6" :lg="6" :sm="24">
          <a-form-item label="来源">
            <a-select v-model="queryParam.type" placeholder="请选择" show-search :filter-option="filterOption">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="item.code+''" v-for="item in typeList" :key="item.code">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="6" :lg="6" :sm="24" v-if="isMaterialList">
          <a-form-item label="搭配类型">
            <a-select v-model="queryParam.sonType" placeholder="请选择" show-search :filter-option="filterOption">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="item.code" v-for="item in lookTypes" :key="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="6" :lg="6" :sm="24">
          <a-form-item label="文案">
            <a-input
              v-model="queryParam.content"
              placeholder="请输入"
              allowClear
            />
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="6" :lg="6" :sm="24" v-if="isMaterialList">
          <a-form-item label="搭配评级">
            <a-select v-model="queryParam.level" placeholder="请选择" show-search :filter-option="filterOption">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="10">S</a-select-option>
              <a-select-option value="20">A</a-select-option>
              <a-select-option value="30">B</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="6" :lg="6" :sm="24" v-if="isMaterialList">
          <a-form-item label="状态">
            <a-select v-model="queryParam.syncContentStatus" placeholder="请选择" show-search :filter-option="filterOption">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="Y">已同步</a-select-option>
              <a-select-option value="N">未同步</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="9" :xl="9" :lg="9" :sm="24" v-if="isMaterialList">
          <a-form-item label="创建时间" has-feedback>
            <a-range-picker
              style="width:100%;"
              show-time
              valueFormat="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss"
              v-model="queryParam.time"
            />
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="6" :lg="6" :sm="24" v-if="!isMaterialList">
          <a-form-item label="素材类型">
            <a-select v-model="queryParam.sonType" placeholder="请选择" show-search :filter-option="filterOption">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="item.code+''" v-for="item in sonTypeList" :key="item.code">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="9" :xl="9" :lg="9" :sm="24" v-if="isMaterialTools">
          <a-form-item label="同步时间" has-feedback>
            <a-range-picker
              style="width:100%;"
              show-time
              valueFormat="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss"
              v-model="queryParam.time"
            />
          </a-form-item>
        </a-col>
        <a-col :xxl="isMaterialTools || isMaterialList ? 15 : 24" :xl="isMaterialTools || isMaterialList ? 15 : 24" :lg="isMaterialTools || isMaterialList ? 15 : 24" :sm="24">
          <span class="table-page-search-submitButtons">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button style="margin-left: 8px" @click="reset">重置</a-button>
            <a-button v-if="isMaterialTools" type="primary" style="margin-left: 8px"
                      @click="brandMaterial">同步买家秀</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
    <a-modal title="搭配内商品" :visible="currentProductVisible" width="700px" :footer="null"
             @cancel="currentProductVisible = false">
      <a-table bordered :pagination="false" :columns="productColumns" :data-source="productList"
               :rowKey="(record, index) => index">
         <span class="product" slot="product" slot-scope="text, record, index">
            <img class="img" v-if="record.productImage" :src="record.productImage" alt="">
            <img class="img" v-else src="https://picttype1.jnby.com/community/goods/pl-goods.png" alt="" />
            <div class="product-name">{{record.productName}}</div>
         </span>
      </a-table>
    </a-modal>
  </div>
</template>
<script>
  import { brandList } from '../components/brandList.js'
  import { lookLabel } from '@api/micromall/collocation.js'
  import moment from 'moment'
  const productColumns = [
    {
      title: '序号',
      width: '1',
      align: 'center',
      customRender: (text, record, index) => `${index + 1}`
    },
    {
      title: '商品',
      width: '10',
      align: 'center',
      scopedSlots: { customRender: 'product' }
    },
    {
      title: '款号',
      width: '4',
      align: 'center',
      dataIndex: 'productNo'
    },
    {
      title: '年份',
      width: '3',
      align: 'center',
      dataIndex: 'year'
    },
    {
      title: '波段',
      width: '3',
      align: 'center',
      dataIndex: 'band'
    },
    {
      title: '季节',
      width: '3',
      align: 'center',
      dataIndex: 'season'
    }
  ]
  let months = []
  for (let i = 1; i < 13; i++) {
    months.push(i)
  }
  
  export default {
    props: {
      isMaterialTools: {
        type: Boolean,
        default: false
      },
      isMaterialList: {
        type: Boolean,
        default: false // 来自素材库选择素材
      },
      productList: {
        type: Array,
        default: []
      },
      productVisible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        months,
        lookTypes: [],
        styleOptions: [],
        yearShowOne: false,
        brandList,
        typeList: [
          {
            name: '有搭素材',
            code: 'B10-A01'
          },
          {
            name: '零售素材',
            code: 'B10-A02'
          },
          {
            name: '导购素材',
            code: 'B10-A03'
          }
        ],
        sonTypeList: [
          {
            name: '搭配师',
            code: 1001
          },
          {
            name: '明星导购',
            code: 3001
          },
          {
            name: '普通导购',
            code: 3002
          },
          {
            name: 'KOU导购',
            code: 3003
          },
          {
            name: '总部经理',
            code: 3004
          },
          {
            name: '大区经理',
            code: 3005
          },
          {
            name: 'BOX+主动要盒素材',
            code: 2001
          },
          {
            name: 'JNBY陈列',
            code: 2002
          },
          {
            name: '抖音同款',
            code: 2003
          },
          {
            name: '品牌代言人',
            code: 2004
          },
          {
            name: '主题穿搭推荐',
            code: 2005
          },
          {
            name: '小红书达人同款',
            code: 2006
          },
          {
            name: '营销活动',
            code: 2007
          },
          {
            name: '明星达人穿搭',
            code: 2008
          },
          {
            name: '搭配图&单品图',
            code: 2009
          },
          {
            name: '新品季度大片',
            code: 2010
          },
          {
            name: '社群素材',
            code: 2011
          },
          {
            name: 'JNBYHOME-O',
            code: 2012
          },
          {
            name: 'JNBYHOME-M',
            code: 2013
          },
          {
            name: 'JNBYHOME-H',
            code: 2014
          },
          {
            name: 'JNBYHOME-E',
            code: 2015
          },
          {
            name: '总部搭配师',
            code: 2016
          },
          {
            name: '会员部',
            code: 2017
          },
          {
            name: '品牌代言人同款',
            code: 2018
          }
        ],
        productColumns,
        queryParam: {
          sonType: '',
          type: '',
          brandId: '',
          season: '',
          productBandMonth: '',
          productBand: '',
          labelId: '',
          level: '',
          syncContentStatus: ''
        }
      }
    },
    computed: {
      currentProductVisible: {
        get() {
          return this.productVisible
        },
        set(val) {
          this.$emit('update:productVisible', val)
        }
      }
    },
    created() {
      this.styleList()
      this.lookTypeList()
    },
    mounted() {
    },
    methods: {
      async lookTypeList() {
        const re = await lookLabel({code:'B10-A02'})
        console.log(re)
        this.lookTypes = re.data
      },
      
      async styleList() {
        const re = await lookLabel({code:'B08-A01'})
        console.log(re)
        this.styleOptions = re.data
      },
        // 年份选择器
      handChange() {
        this.queryParam.year = null
      },

      // 年份选择器
      openChangeOne(status) {
        this.yearShowOne = status
      },

      // 得到年份选择器的值
      panelChangeOne(value) {
        this.queryParam.year = moment(value).format('YYYY')
        this.yearShowOne = false;
      },

      // 素材库选择素材
      brandMaterial() {
        this.$emit('brandMaterial')
      },

      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },

      search() {
        let queryParam = this.filterFields(this.queryParam)
        this.$emit('onSearch', queryParam)
      },

      reset() {
        this.queryParam = {
          sonType: '',
          type: '',
          brandId: '',
          season: '',
          productBandMonth: '',
          productBand: '',
          labelId: '',
          level: '',
          syncContentStatus: ''
        }
        let queryParam = this.filterFields(this.queryParam)
        this.$emit('onSearch', queryParam)
      },

      filterFields(values) {
        const formValue = {}
        Object.keys(values).forEach(i => {
          if (values[i] && values[i].length) {
            if (i === 'time') {
              console.log('time')
              formValue.startTime = values[i][0]
              formValue.endTime = values[i][1]
            } else {
              formValue[i] = values[i]
            }

          }
        })
        return formValue
      }
    }
  }
</script>
<style lang="less" scoped>
  .table-page-search-submitButtons {
    display: flex;
    justify-content: flex-end;
  }
  .product {
    display: flex;
    align-items: center;
    overflow: hidden;
    .img {
      display: block;
      margin: 0 2px;
      width: 60px;
      height: 60px;
      border: 1px dashed #f5f5f5;
      object-fit: scale-down;
      cursor: pointer;
    }
    .product-name {
      flex: 1;
      margin-left: 5px;
      width: 80px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      word-break: break-all; /* 追加这一行代码 */
      /* autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
    }
  }
</style>
<style scoped>
  /* For demo */
  .ant-carousel >>> .slick-slide {
    text-align: center;
    height: 160px;
    line-height: 160px;
    background: #364d79;
    overflow: hidden;
  }

  .ant-carousel >>> .slick-slide h3 {
    color: #fff;
  }
</style>
